﻿<div name="tabs" class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active"><a data-bind="click:tabs.all" href="javascript:">全部</a></li>
        <li><a data-bind="click:tabs.recommend" href="javascript:" class="">首页推荐</a></li>
        <li class="pull-right">
        </li>
        <li class="pull-right">

        </li>
        <li data-bind="visible:tabs.current() == 'all'" class="pull-right">
            <a data-bind="click:productAdd" href="javascript:" class="btn btn-primary btn-sm pull-right">添加</a>
            <button data-bind="click:search" class="btn btn-primary btn-sm pull-right">搜索</button>
            <input type="text" data-bind="value:searchText" class="form-control" style="width: 300px" placeholder="请输入SKU或名称、类别" />
        </li>
    </ul>
</div>

<!--<div class="tabbable">
</div>-->

<table data-bind="visible:tabs.current() == 'all'" name="productList" class="table table-striped table-bordered table-hover">
    <thead>
        <tr class="ui-state-default">
            <th style="text-align: center;width:290px;">
                编号
            </th>
            <th style="text-align: center;">
                SKU
            </th>
            <th style="text-align: center;">
                名称
            </th>
            <th style="text-align: center;">
                类别
            </th>
            <th style="text-align: center; width: 100px;">
                单位
            </th>
            <th style="text-align: center; width: 50px;">
                价格
            </th>
            <!--<th style="text-align: center; width: 60px;">
                优惠
            </th>-->
            <!--<th style="text-align: center; width: 60px;">
                利润率
            </th>-->

            <th style="text-align: center; width: 50px;">
                库存
            </th>
            <th style="text-align: center; width: 50px;">
                限购
            </th>
            <th style="text-align: center; width: 60px;">
                上下架
            </th>
            <th style="width: 140px; text-align: center;">

            </th>
        </tr>
    </thead>
    <tfoot>
        <tr class="ui-state-hover pagerBar">
            <td colspan="11" data-bind="with:paging">
                <div class="pull-left">
                    <a href="javascript:" data-bind="html:previousPageText, visible:previousPageIndex() != null, click:$root.handlePreviousPage"></a>
                    <!-- ko foreach:numbers -->
                    <a href="javascript:" data-bind="html:$data+1, click:$root.handlePage, attr:{style: $data == $parent.pageIndex() ? 'color:red' : ''}"></a>
                    <!-- /ko -->
                    <a href="javascript:" data-bind="html:nextPageText, visible:nextPageIndex, click:$root.handleNextPage"></a>
                </div>
                <div class="pull-right" style="margin-right:4px;">总记录：<span data-bind="html:recordCount"></span></div>
            </td>
        </tr>
    </tfoot>
    <tbody data-bind="foreach:products">
        <tr class="">
            <td data-bind="text:Id"></td>
            <td data-bind="html:SKU"></td>
            <td data-bind="html:Name"></td>
            <td data-bind="html:CategoryName"></td>
            <td data-bind="html:Unit"></td>
            <td data-bind="money:Price" style="text-align: right; width: 80px;"></td>
            <!--<td data-bind="money:Discout" style="text-align: right; width: 80px;"></td>-->
            <!--<td data-bind="text:['{0}%', DisplayCommission]" style="text-align: right; width: 60px;"><div></div></td>-->
            <td style="width: 60px;">
                <a data-bind="click:$root.productStock.show,text:Stock()==null?'无限':Stock()" href="javascript:"></a>
            </td>
            <td style="width: 60px;">
                <a data-bind="click:$root.restriction.show,text:ko.unwrap(BuyLimitedNumber)==null?'不限':ko.unwrap(BuyLimitedNumber)" href="javascript:"></a>
            </td>
            <td style="width: 60px;">
                <button class="btn btn-primary btn-minier" data-bind="visible:OnShelve,click:$root.offShelve">已上架</button>
                <button class="btn btn-default btn-minier" data-bind="visible:OffShelve,click:$root.onShelve">已下架</button>
            </td>
            <td style="text-align: center; width: 180px;">
                <a data-bind="click:$root.productRecommend" class="btn btn-minier btn-success">
                    <i class="icon-hand-up"></i>
                </a>
                <a data-bind="click:$root.productTop" href="javascript:" class="btn btn-minier btn-purple" style="margin-right: 4px;">
                    <i class="icon-arrow-up"></i>
                </a>
                <!--<a data-bind="attr:{href:'#Sho/ProductEdit/'+Id()+'/edit'}" class="btn btn-minier btn-info" style="margin-right: 4px;">
                    <i class="icon-pencil"></i>
                </a>-->
                <a data-bind="attr:{href:'#shopping/product/productEdit?method=edit&id='+Id()}" class="btn btn-minier btn-info" style="margin-right: 4px;">
                    <i class="icon-pencil"></i>
                </a>
                <a data-bind="attr:{href:'#shopping/product/productEdit?method=add&id='+Id()}" class="btn btn-minier btn-warning">
                    <i class="icon-plus"></i>
                </a>
                <button data-bind="click:$root.productRemove" class="btn btn-minier btn-danger" style="margin-left: 4px;"><i class="icon-trash"></i></button>
            </td>
        </tr>
    </tbody>
</table>

<table name="homeProducts" data-bind="visible:tabs.current() == 'recommend'" class="table table-striped table-bordered table-hover">
    <thead>
        <tr class="ui-state-default">
            <th style="text-align: center;">
                名称
            </th>
            <th style="text-align: center; width: 100px;">
                单位
            </th>
            <th style="text-align: center; width: 80px;">
                会员价
            </th>
            <th style="text-align: center; width: 80px;">
                价格
            </th>
            <th style="width: 140px; text-align: center;">
                操作
            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach:homeProducts">
        <tr>
            <td data-bind="html:Name"></td>
            <td data-bind="html:Unit"></td>
            <td data-bind="money:MemberPrice" style="text-align:right"></td>
            <td data-bind="money:Price" style="text-align:right"></td>
            <td>
                <button data-bind="click:$root.homeProductRemove" class="btn btn-minier btn-danger" style="margin-left: 4px;"><i class="icon-trash"></i></button>
            </td>
        </tr>
    </tbody>
</table>


<div name="productStock" data-bind="with:productStock" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">产品库存</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label data-bind="html:productName"></label>
                </div>
                <div class="form-group">
                    <input data-bind="value:stock,disable:unlimit" type="text" class="form-control" placeholder="请输入产品库存数量" />
                </div>
                <div class="checkbox">
                    <label><input data-bind="checked:unlimit" type="checkbox" class="checkbox" style="margin-top:0px;" /><span>不限库存</span></label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button data-bind="click:confirm" type="button" class="btn btn-primary">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div name="restriction" data-bind="with:restriction" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">产品限购</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label data-bind="html:productName"></label>
                </div>
                <div class="form-group">
                    <input data-bind="value:quantity,disable:unlimit" type="text" class="form-control" placeholder="请输入产品限购数量" />
                </div>
                <div class="checkbox">
                    <label><input data-bind="checked:unlimit" type="checkbox" class="checkbox" style="margin-top:0px;" /><span>不限数量</span></label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button data-bind="click:confirm" type="button" class="btn btn-primary">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>


